<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>系统销售商品</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="clearfix mb-20">
                        <Row>
                            <Button custom-icon="iconfont icon-fangkuai2"
                                    type="primary"
                                    size="small"
                                    style="float:right"
                                    @click="showCreateModal">添加商品</Button>
                            
                            <Col span="4">
                            <Input class="mr-10"
                                   v-model="queryData.goodsName"
                                   placeholder="商品名称"
                                   style="width: 230px" />

                            </Col>
                            <Col span="4">
                            <Input class="mr-10"
                                   v-model="queryData.goodsName"
                                   placeholder="商品标题"
                                   style="width: 230px" />

                            </Col>
                            <Col span="3">
                            <Select placeholder="请选择商品状态"
                                    class="mr-10"
                                    v-model="queryData.status"
                                    style="width:150px"
                                    :clearable=true>
                                <Option v-for="item in modal.sku.status"
                                        :value="item.value"
                                        :key="item.value">{{ item.label }}
                                </Option>
                            </Select>
                            </Col>
                            <Button type="primary"
                                    custom-icon="iconfont icon-chaxun"
                                    size="small"
                                    @click="getTableData">查找</Button>
                        </Row>
                        <!-- <Button custom-icon="iconfont icon-fangkuai2"
                                type="primary"
                                size="small"
                                style="float:right"
                                @click="showCreateModal">添加商品</Button> -->
                        <!-- <Select v-model="queryData.brandId"
                    label-in-value
                    placeholder="请选择品牌"
                    style="width:150px">
              <Option v-for="(ad,index) in brandList"
                      :key="ad.id"
                      :value="ad.id"
                      :label="ad.nameZh"></Option>
            </Select>
            <Col span="12"
                 class="mr-10">
                  <Row>
                       <Col span="3" style="line-height:32px">选择品类：</Col>
              <Col span="6">

              <Select @on-change="changeLevel1"
                      v-model="queryData.categoryId"
                      placeholder="请选择"
                      clearable
                      label-in-value>
                <Option v-for="items in level1List"
                        :key="items.id"
                        :value="items.id"
                        :label="items.name"></Option>
              </Select>
              </Col>
              <Col span="6">
              <Select v-model="queryData.categoryId"
                      placeholder="请选择"
                      clearable
                      label-in-value
                      @on-change="changeLevel2">
                <Option v-for="o in level2List"
                        :value="o.id"
                        :key="o.id"
                        :label="o.name"></Option>
              </Select>
              </Col>
              <Col span="6">
              <Select @on-change="changeLevel3"
                      v-model="queryData.categoryId"
                      placeholder="请选择"
                      label-in-value
                      clearable>
                <Option v-for="o in level3List"
                        :value="o.id"
                        :key="o.id"
                        :label="o.name"></Option>
              </Select>
              </Col>
            </Row>
            </Col>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="getTableData">查找</Button> -->
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border
                               :loading="list.loading"
                               :columns="list.columns"
                               :data="list.tableData"
                               @on-selection-change="selectionChange">
                        </Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr"
                              :total="queryData.totalRecord"
                              :page-size="queryData.pageSize"
                              :current="queryData.page"
                              @on-change="changePage"
                              @on-page-size-change="onPageSizeChange"
                              show-elevator
                              show-total
                              show-sizer></Page>
                    </div>
                </div>
            </div>
            <Modal v-model="modal.sku.isShow"
                   :loading="modal.sku.loading"
                   :mask-closable="false"
                   :title="modal.sku.title"
                   @on-ok="postData"
                   width="1000px">
                <Form ref="systemFrom"
                      :model="modal.sku.formData"
                      :rules="modal.sku.rules"
                      :label-width="140"
                      inline>
                    
                    <FormItem label="商品标题"
                              prop="title">
                        <Input v-model="modal.sku.formData.title"
                               style="width: 300px" />
                    </FormItem>
                    <FormItem label="品类"
                              v-if="modal.sku.type=='create'"
                              prop="categoryId">
                        <Row>
                            <Col span="8">
                            <Select @on-change="changeLevel1"
                                    v-model="modal.sku.formData.level1"
                                    placeholder="请选择"
                                    clearable
                                    label-in-value
                                    style="width: 95px">
                                <Option v-for="items in level1List"
                                        :key="items.id"
                                        :value="items.id"
                                        :label="items.name"></Option>
                            </Select>
                            </Col>
                            <Col span="8">
                            <Select v-model="modal.sku.formData.level2"
                                    placeholder="请选择"
                                    clearable
                                    label-in-value
                                    style="width: 95px"
                                    @on-change="changeLevel2">
                                <Option v-for="o in level2List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                            <Col span="8">
                            <Select @on-change="changeLevel3"
                                    v-model="modal.sku.formData.level3"
                                    placeholder="请选择"
                                    label-in-value
                                    clearable
                                    style="width: 105px">
                                <Option v-for="o in level3List"
                                        :value="o.id"
                                        :key="o.id"
                                        :label="o.name"></Option>
                            </Select>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="品牌"
                              prop="brandId"
                              v-if="showBrand">
                        <Select v-model="modal.sku.formData.brandId"
                                @on-change="changeBrand"
                                label-in-value
                                clearable
                                style="width:300px">
                            <Option v-for="(ad,index) in brandList"
                                    :key="ad.id"
                                    :value="ad.id"
                                    :label="ad.nameZh"></Option>
                        </Select>
                    </FormItem>
                    <FormItem label="建议零售价(单位分)"
                              prop="msrp">
                        <Input v-model="modal.sku.formData.msrp"
                               type="number"
                               style="width: 300px" />
                        <!-- <span class="price">分</span> -->

                    </FormItem>
                    <FormItem label="优惠价(单位分)"
                              prop="discountedPrice">
                        <Input v-model="modal.sku.formData.discountedPrice"
                               type="number"
                               style="width: 300px" />
                        <!-- <span class="price">分</span> -->
                    </FormItem>
                    <FormItem label="商品价格(单位分)"
                              prop="retailPrice">
                        <Input v-model="modal.sku.formData.retailPrice"
                               type="number"
                               style="width: 300px" />
                        <!-- <span class="price">分</span> -->
                    </FormItem>
                    <FormItem label="会员价(单位分)"
                              prop="memberPrice">
                        <Input v-model="modal.sku.formData.memberPrice"
                               type="number"
                               style="width: 300px" />
                        <!-- <span class="price">分</span> -->
                    </FormItem>

                    <FormItem label="商品条形码"
                              prop="code"
                              v-if="modal.sku.type=='create'">
                        <Input v-model="modal.sku.formData.code"
                               style="width: 300px" />

                    </FormItem>
                    <FormItem label="商品条形码"
                              prop="code"
                              v-if="modal.sku.type=='update'">
                        <Input v-model="modal.sku.formData.code"
                               style="width: 750px" />

                    </FormItem>
                    <FormItem label="入库数量(单位正整数)"
                              prop="stockNum"
                              v-if="modal.sku.type=='create'">
                        <Input v-model="modal.sku.formData.stockNum"
                               type="number"
                               style="width: 300px" />
                    </FormItem>

                    <FormItem label="是否上架"
                              prop="onShelves"
                              style="margin-right: 150px;">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.sku.formData.onShelves"
                                  :value="modal.sku.formData.onShelves">
                            <span slot="open">上架</span>
                            <span slot="close">下架</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="热门商品"
                              prop="isHot"
                              style="margin-right: 150px;">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.sku.formData.isHot"
                                  :value="modal.sku.formData.isHot">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="特价商品"
                              prop="specialOffer">
                        <i-switch size="large"
                                  @on-change="change"
                                  v-model="modal.sku.formData.specialOffer"
                                  :value="modal.sku.formData.specialOffer">
                            <span slot="open">是</span>
                            <span slot="close">否</span>
                        </i-switch>
                    </FormItem>
                    <FormItem label="图片"
                              prop="uploadList2">
                        <upload-image ref="upload2"
                                      :uploadList.sync="modal.sku.formData.uploadList2"
                                      @imageupload="calcImg"></upload-image>
                    </FormItem>
                </Form>
            </Modal>
            <!-- 入库 -->
            <Modal v-model="modal.put.isShow"
                   :loading="modal.put.loading"
                   :mask-closable="false"
                   :title="modal.put.title"
                   @on-ok="handlePut">
                <Form ref="systemFrom"
                      :model="modal.put.formData"
                      :label-width="120">
                    <FormItem label="入库数量"
                              prop="stockNum">
                        <Input v-model="modal.put.formData.stockNum"
                               type="number"
                               style="width: 300px" />
                    </FormItem>
                </Form>
            </Modal>
        </div>
    </div>
</template>
<script>
import sele from '@/view/test/city.vue'
import SkuApi from '@/api/business/sku.js'
import SpuApi from '@/api/business/spu.js'
import ValueApi from '@/api/business/value.js'
import GroupApi from '@/api/business/group.js'
import SpecApi from '@/api/business/spec.js'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'
import CategoryApi from '@/api/business/category.js'
import BrandApi from '@/api/business/brand.js'
import { Message } from 'iview'
export default {
	components: {
		sele,
		Uploadoss,
		uploadImage
	},
	mounted() {
		this.getTableData()
	},
	data() {
		return {
			inputValue: '',
			passedInputValue: '',
			checkAll: false,
			checkAllGroup: [],
			// 品牌列表
			brandList: [], // 列表
			groupList: [],
			specList: [],
			valueList: [],
			spuList: [],
			level1List: [],
			level2List: [],
			level3List: [],
			list: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					// {
					//   type: 'selection',
					//   width: 50,
					//   align: 'center'
					// },
					/** 开始自动生成 */
					{ title: 'id', key: 'id', align: 'center', width: '60px' },
					{
						title: '商品名称',
						key: 'name',
						align: 'center',
						minWidth: 100
					},
					{
						title: '商品标题',
						key: 'spuTitle',
						align: 'center',
						minWidth: 100
					},
					{
						title: '商品描述',
						key: 'title',
						align: 'center',
						minWidth: 100
					},
					{
						title: '商品条形码',
						key: 'code',
						align: 'center',
						width: '100px'
					},
					{
						title: '商品图片',
						key: 'images',
						align: 'center',
						minWidth: 60,
						// 两种方式均可以
						render: (h, params) => {
							let img = params.row.images.split(',')

							return h('img', {
								attrs: {
									src: img[0]
								},
								style: {
									width: 'auto',
									height: '80px'
								}
							})
						}
						// render: (h, params) => {
						// 	return h('img', {
						// 		attrs: {retailPrice
						// 			src: params.row.images
						// 		},
						// 		style: {
						// 			width: 'auto',
						// 			height: '80px'
						// 		}
						// 	})
						// }
					},
					{
						title: '商品价格(分)',
						key: 'retailPrice',
						align: 'center',
						width: '100px'
					},
					{
						title: '库存数目',
						key: 'stockNum',
						align: 'center'
					},
					{
						title: '销售数目',
						key: 'saleNum',
						align: 'center'
					},
					{
						title: '总入库数',
						key: 'totalNum',
						align: 'center'
					},
					{
						title: '商户名称',
						key: 'businessName',
						align: 'center',
						width: '100px'
					},
					{
						title: '状态',
						key: 'onShelves',
						align: 'center',
						width: '70px',
						render: (create, params) => {
							let s = params.row.onShelves
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '上架'
							} else {
								color = '#d72c23'
								text = '下架'
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					// {
					// 	title: '是否有效',
					// 	key: 'state',
					// 	align: 'center',
					// 	width: '70px',
					// 	render: (create, params) => {
					// 		let s = params.row.state
					// 		let color, text
					// 		if (s) {
					// 			color = '#5ed71a'
					// 			text = '有效'
					// 		} else {
					// 			color = '#d72c23'
					// 			text = '无效'
					// 		}
					// 		return create(
					// 			'div',
					// 			{
					// 				style: {
					// 					color: color,
					// 					borderRadius: '20px'
					// 				}
					// 			},
					// 			text
					// 		)
					// 	}
					// },
					{
						title: '特价商品',
						key: 'specialOffer',
						align: 'center',
						width: '70px',
						render: (create, params) => {
							let s = params.row.specialOffer

							let color, text
							if (s) {
								color = '#5ed71a'
								text = '是'
							} else {
								color = '#d72c23'
								text = '否'
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '热门商品',
						key: 'isHot',
						align: 'center',
						width: '70px',
						render: (create, params) => {
							let s = params.row.isHot
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '是'
							} else {
								color = '#d72c23'
								text = '否'
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					//   {
					//     title: '添加时间',
					//     key: 'createTime',
					//     align: 'center',
					//     width: '100px'
					//   },
					{
						title: '修改时间',
						key: 'updateTime',
						align: 'center'
						// width: '100px'
					},
					{
						// 操作
						title: '操作',
						key: 'action',
						width: 130,
						align: 'center',
						fixed: 'right',
						render: (h, params) => {
							return h('div', { class: 'action-group' }, [
								h(
									'Tooltip',
									{
										props: {
											placement: 'top',
											content: '入库'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'success',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.showPutModal(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type: 'md-archive',
														size: 18
													}
												})
											]
										)
									]
								),
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '编辑'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.showUpdateModal(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-bianjisekuai',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'right',
											content: '删除'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'error',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.delData(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-shanchusekuai',
														size: 18
													}
												})
											]
										)
									]
								)
							])
						}
					}
				]
			},
			level: 1,
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1,
				totalRecord: 0
			},
			queryExport: {},
			//将同一个接口的数据或相似接口的数据放在一个对象中，使用的时候用(.)解包出来
			modal: {
				sku: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '添加销售商品',
					formData: {
						uploadList2: []
					},
					rules: {
						// check
						businessId: [
							{
								type: 'string',
								required: true,
								message: '请选择商户',
								trigger: ['blur', 'change']
							}
						],
						spuId: [
							{
								type: 'number',
								required: true,
								message: '请选择商品',
								trigger: ['blur', 'change']
							}
						],
						groupId: [
							{
								type: 'number',
								required: true,
								message: '请选择规格组',
								trigger: ['blur', 'change']
							}
						],
						code: [
							{
								type: 'string',
								required: true,
								message: '请输入商品条形码',
								trigger: ['blur', 'change']
							}
						],
						uploadList2: [
							{
								type: 'array',
								required: true,
								message: '请上传图片',
								trigger: 'change'
							}
						],
						spec: [
							{
								type: 'array',
								required: true,
								message: '请选择特有规格属性',
								trigger: ['blur', 'change']
							}
						],
						ownSpec: [
							{
								type: 'array',
								required: true,
								message: '请选择特有属性值',
								trigger: 'change'
							}
						],
						retailPrice: [
							{
								required: true,
								message: '请输入商品价格,以分为单位',
								trigger: ['blur']
							},
							{
								message: '商品价格必须为非零正整数',
								trigger: ['blur', 'change'],
								pattern: /^(?!0)\d+$/
							}
						],
						msrp: [
							{
								required: true,
								message: '请输入建议零售价,以分为单位',
								trigger: ['blur']
							},
							{
								message: '建议零售价必须为非零正整数',
								trigger: ['blur', 'change'],
								pattern: /^(?!0)\d+$/
							}
						],
						discountedPrice: [
							{
								required: true,
								message: '请输入优惠价,以分为单位',
								trigger: ['blur']
							},
							{
								message: '优惠价必须为正整数',
								trigger: ['blur', 'change'],
								pattern: /^(0|[1-9][0-9]*)$/
							}
						],
						memberPrice: [
							// {
							// 	required: true,
							// 	message: '请输入优惠价,以分为单位',
							// 	trigger: ['change']
							// },
							{
								message: '会员价必须为非零正整数',
								trigger: 'change',
								pattern: /^(?!0)\d+$/
							}
						],
						stockNum: [
							{
								required: true,
								message: '请输入入库数量,单位为正整数',
								trigger: ['change']
							},
							{
								message: '入库数量必须为非零正整数',
								trigger: 'change',
								pattern: /^(?!0)\d+$/
							}
						],
						onShelves: [
							{
								type: 'boolean',
								required: true,
								message: '请选择商品状态',
								trigger: 'change'
							}
						],
						isHot: [
							{
								type: 'boolean',
								required: true,
								message: '请选择是否热门商品',
								trigger: 'change'
							}
						],
						specialOffer: [
							{
								type: 'boolean',
								required: true,
								message: '请选择是否特价商品',
								trigger: 'change'
							}
						]
					},
                    status: [
						{
							value: 1,
							label: '上架'
						},
						{
							value: 2,
							label: '下架'
						}
					],
				},
				//
				put: {
					isShow: false,
					loading: true,
					type: 'create', // create 新建，update 修改
					title: '入库',
					formData: {}
				}
			},
            showBrand: false
		}
	},
	methods: {
        // 品类
        getCategory1(level, parent) {
			//   this.category1 =
			let that = this
			CategoryApi.getPageList({
				page: 1,
				limit: 100,
				level: level,
				parentId: parent
			}).then(res => {
				let data = res.data.list
				data.forEach(item => {
					item.label = item.name
					item.value = item.value
				})
				if (level == 1) {
					that.level1List = data
				} else if (level == 2) {
					that.level2List = data
				} else if (level == 3) {
					that.level3List = data
				}
			})
		},
        changeLevel1(e) {
			if (e) {
				this.getCategory1(2, e.value)
			}
		},
        changeLevel2(e) {
			if (e) {
				this.getCategory1(3, e.value)
			}
		},
        changeLevel3(e) {
			if (e) {
				this.modal.sku.formData.categoryId = e.value
				this.modal.sku.formData.categoryName = e.label
				this.queryData.categoryId = e.value
				this.getBrandList(e.value)
			}
		},
        // 获取品牌列表
		async getBrandList(categoryId) {
			this.brandList = (
				await BrandApi.getBindList({ categoryId: categoryId })
			).data
			this.showBrand = true
		},
        changeBrand(e) {
			if (e) {
				this.modal.sku.formData.brandId = e.value
				this.modal.sku.formData.brandName = e.label
				// this.queryData.brandId = e.value
			}
		},
		// 获取列表
		getTableData() {
			const that = this
			that.queryData.totalRecord = undefined
			SkuApi.getPageList(that.queryData)
				.then(res => {
					that.list.tableData = res.data.list
					var array = that.list.tableData
					var data1 = array
					const result = data1.map(item => {
						const ownSpecArr = JSON.parse(item.ownSpec)
						const specStr = ownSpecArr
							.map(spec => spec.value)
							.join(' ')
						// 使用对象展开运算符`{...item}`创建一个新的对象，将原来的`name`属性替换为新的格式化后的名称`newName`
						// console.log({...item},'item')
						return {
							...item,
							name: `${item.name} ${specStr}`
						}
					})
					that.list.tableData = result
					that.queryData.totalRecord = res.data.totalRecord
					that.queryData.page = res.data.pageNum
					that.queryData.limit = res.data.pageSize
				})
				.catch(error => {
					Message.error(error)
				})
		},
		// 获取商户列表
		async getBusinessList() {
			this.businessList = (await SpuApi.init()).data
		},
		// 预加载商户标准商品
		async getSpuList(data) {
			this.spuList = (
				await SpuApi.initSpu({
					businessId: data
				})
			).data
		},
		// 获取规格组列表 预加载规则组
		async getGroupList(id) {
			let list = (
				await GroupApi.init({
					spuId: id
				})
			).data
			let group = list.group
			let param = list.param
			let value = list.value
			value.forEach(a => {
				if (a.unit) {
					a.value = a.value + a.unit
				}
			})
			group.forEach(e => {
				e.children = []
				param.forEach(i => {
					if (e.id == i.groupId) {
						e.children.push(i)
					}
					i.children = []
					value.forEach(o => {
						// let lab = o.value
						// if (o.unit) {
						//   lab = lab + '(' + o.unit + ')'
						// }
						// o.value = lab
						// o.value = o.value + o.unit
						if (i.id == o.paramId) {
							i.children.push(o)
						}
					})
				})
			})
			this.groupList = group
		},
		// 获取规格属性列表
		async getSpecList(id) {
			this.specList = (
				await SpecApi.init({
					groupId: id
				})
			).data
			this.specList.forEach(i => {
				i.label = i.name
				i.value = i.id
			})
		},
		// 获取规格属性值列表
		async getValueList(id) {
			let list = await ValueApi.getPageList({
				paramId: id,
				page: 1,
				limit: 100
			})
		},
		checkParam(e) {
			
		},
		// 图片的校验
		calcImg() {
			this.modal.sku.formData.images = this.modal.sku.formData.uploadList2.map(
				v => {
					if (v.length < 1) return v
					v = v.response.res.requestUrls[0]
					return v
				}
			)
			// 手动去除原图保护
			//   this.modal.sku.formData.images.forEach((v) => {
			//     if (v.response.res.requestUrls[0].indexOf('?') > -1) {
			//       v.response.res.requestUrls[0] = v.response.res.requestUrls[0].split('?')[0]
			//     }
			//   })
		},
		handleCheckAll() {
			if (this.indeterminate) {
				this.checkAll = false
			} else {
				this.checkAll = !this.checkAll
			}
			this.indeterminate = false

			if (this.checkAll) {
				this.modal.sku.formData.spec = []
				this.specList.forEach(i => {
					this.modal.sku.formData.spec.push(i.id)
				})
			} else {
				this.modal.sku.formData.spec = []
			}
		},
		checkAllGroupChange(data) {
			this.valueList = []
			if (data.length) {
				data.forEach(i => {
					this.getValueList(i)
				})
			}
		},
		checkAllSpecChange() {
			this.modal.sku.formData.ownSpec = data
		},
		// 删除
		delData(ids) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					ids.toString() +
					'</strong> 的商品吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					SkuApi.del(ids).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getTableData()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},
		// 查询
		inQuire() {
			const that = this
			that.getTableData()
		},
		// 全选，不全选
		selectionChange(args) {
			this.list.selections = args
		},

		// 每页显示记录数变更
		onPageSizeChange(pageSize) {
			this.queryData.limit = pageSize
			this.getTableData()
		},

		// 换页
		changePage(page) {
			this.queryData.page = page
			this.getTableData()
		},
		//
		showCreateModal() {
			this.modal.sku.formData = {}

			this.modal.sku.formData.ownSpec = []
			this.modal.sku.title = '添加销售商品'
			this.modal.sku.type = 'create'
			this.modal.sku.isShow = true
			this.modal.sku.formData.onShelves = false
			this.modal.sku.formData.isHot = false
			this.modal.sku.formData.specialOffer = false
		},
		showPutModal(id) {
			this.modal.put.formData.id = id
			this.modal.put.title = '入库'
			this.modal.put.type = 'create'
			this.modal.put.isShow = true
		},
		showUpdateModal(row) {
			let that = this
			this.modal.sku.title = '修改销售商品'
			this.modal.sku.type = 'update'
			this.modal.sku.formData = row
			this.modal.sku.formData.uploadList2 = []
			let imgs = row.images.split(',')
			let t = 0
			imgs.forEach(i => {
				t++
				let item = {
					status: 'finished',
					response: {
						res: {
							requestUrls: [i]
						}
					}
				}
				that.modal.sku.formData.uploadList2.push(item)
				if (t == imgs.length) {
					this.modal.sku.isShow = true
				}
			})
		},
		changeBusiness(e) {
			if (e) {
				this.modal.sku.formData.businessId = e.value
				this.modal.sku.formData.businessName = e.label
				this.getSpuList(e.value)
			}
		},
		changeSpu(e) {
			let that = this
			this.spuList.forEach(i => {
				if (i.id == e.value) {
					that.getGroupList(i.id)
				}
			})
		},
		changeGroup(i, val) {
			
		},
		changeValue(i) {
			let that = this
			this.modal.sku.formData.ownSpec = []
			this.groupList.forEach(i => {
				i.children.forEach(e => {

					if (e.childrenValue) {
						// i是group e是param
                        var valueId = ''
                        // 取valueId值
                        for (let j = 0; j < (e.children).length; j++) {
                            const element = (e.children)[j];
                            valueId = element.id
                            
                        }
						var groupId = i.id
						var groupName = i.name
						var paramId = e.id
						var paramName = e.name
                        
						that.modal.sku.formData.ownSpec.push({
							groupId: groupId,
							groupValue: groupName,
							id: valueId,
							value: e.childrenValue,
							paramId: paramId,
							paramName: paramName
						})
                        
					}
				})
			})
		},

		postData() {
			const that = this
			that.$refs['systemFrom'].validate(valid => {
				if (valid) {
					if (!that.modal.sku.formData.id) {
						// 新建
						that.modal.sku.formData.images = that.modal.sku.formData.images.join(
							','
						)

						that.modal.sku.formData.ownSpec = JSON.stringify(
							that.modal.sku.formData.ownSpec
						)
						// SkuApi.add(that.modal.sku.formData)
						// 	.then(res => {
						// 		that.modal.sku.isShow = false
						// 		that.modal.sku.loading = false
						// 		if (!res.code) {
						// 			that.getTableData()
						// 			that.$Notice.success({
						// 				title: '保存成功!'
						// 			})
						// 		} else {
						// 			that.$Notice.error({
						// 				title: res.message
						// 			})
						// 		}
						// 	})
						// 	.catch(error => {
						// 		Message.error(error)
						// 	})
					} else {
						// 修改
						
						
						
						if (that.modal.sku.formData.images instanceof Array) {
							that.modal.sku.formData.images = that.modal.sku.formData.images.join(
								','
							)
						} else {
							
							let picture = this.modal.sku.formData.uploadList2.map(
								v => {
									
									if (v.length < 1) return v
									v = v.response.res.requestUrls[0]
									
									return v
								}
							)
							
							that.modal.sku.formData.images = picture.join(',')
							
						}
						SkuApi.update(
							that.modal.sku.formData.id,
							that.modal.sku.formData
						)
							.then(res => {
								if (!res.code) {
									that.getTableData()
									that.$Notice.success({
										title: '保存成功!'
									})
								} else {
									that.$Notice.error({
										title: res.message
									})
								}
								that.modal.sku.isShow = false
								that.modal.sku.loading = false
							})
							.catch(error => {
								Message.error(error)
							})
					}
				} else {
					that.modal.sku.loading = false
					that.$nextTick(() => {
						that.modal.sku.loading = true
					})
				}
			})
		},
		handlePut() {
			let that = this
			SkuApi.put(that.modal.put.formData).then(res => {
				that.modal.put.isShow = false
				that.modal.put.loading = false
				if (!res.code) {
					that.getTableData()
					that.$Notice.success({
						title: '入库成功!'
					})
				} else {
					that.$Notice.error({
						title: res.message
					})
				}
			})
		},
		onchange(e) {
			this.modal.sku.formData.ownSpec = e
		}
	},
	computed: {
		msrp() {
			return this.modal.sku.formData.msrp
		},
		discountedPrice() {
			return this.modal.sku.formData.discountedPrice
		},
		retailPrice() {
			return this.msrp - this.discountedPrice
		}
	},
	watch: {
		msrp(newValue) {
			this.modal.sku.formData.retailPrice =
				newValue - this.discountedPrice
		},
		discountedPrice(newValue) {
			this.modal.sku.formData.retailPrice = this.msrp - newValue
		}

	},
	created() {
		this.getBusinessList()
        this.getCategory1(1, '')
	}
}
</script>
<style>
.ivu-radio-group {
	display: inline-block;
	font-size: 12px;
	vertical-align: middle;
}
.price {
	display: inline-block;
	margin-left: 5px;
}
</style>
<!--  -->